<template>
  <div class="main">
    <section>
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
        <el-row type="flex">
          <el-col :span="3">
            <el-select v-model="firstCategoryId"  placeholder="筛选分类" @change="screenCategory">
              <el-option  v-for="item in categories" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="secondCategoryId"  placeholder="筛选子分类" @change="screenChildCategory">
              <el-option  v-for="item in secondCategory" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="threeCategoryId"  placeholder="筛选子类型">
              <el-option  v-for="item in threeCategory" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="listQuery.type"  placeholder="筛选类型">
              <el-option v-for="item in types" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-select v-model="listQuery.stickStatus"  placeholder="是否置顶">
              <el-option v-for="item in stickStatuses" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="5" style="margin: 0px 10px">
            <el-input v-model="keywords" placeholder="输入标题/关键字" clearable @keyup.enter.native="search"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button v-if="rightsButtons['search']" type="primary" size="medium" plain @click="search">搜索</el-button>
          </el-col>
          <el-col :span="3">
            <el-button v-if="rightsButtons['add']" type="primary" size="medium" plain @click="addOrEdit(firstCategoryId, 'add')">新增</el-button>
            <el-button v-if="rightsButtons['batchDelete']" type="primary" size="medium" plain @click="delItem('batch', '')">批量删除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="listLoading" :data="list" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row @selection-change="handleSelect">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="ID" prop="id"></el-table-column>
        <el-table-column align="center" label="发布人" prop="nickName"></el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
        <el-table-column align="center" label="标题" prop="title"></el-table-column>
        <el-table-column align="center" label="分类" prop="categoryDesc"></el-table-column>
        <el-table-column align="center" label="是否置顶">
          <template slot-scope="scope">
            <span v-if="scope.row.stickStatus===1">置顶</span>
            <span v-if="scope.row.stickStatus===0">不置顶</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.showApp===1">显示</span>
            <span v-if="scope.row.showApp===0">不显示</span>
          </template>
        </el-table-column>
        <el-table-column  align="center" label="操作" v-if="rightsButtons['edit'] || rightsButtons['delete']">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="addOrEdit(scope.row, 'edit')">编辑</el-button>
            <el-button v-if="rightsButtons['delete']" type="primary" size="mini" @click="delItem('one', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </section>
  </div>
</template>
<script>
export default {
  name: 'list',
  data() {
    return {
      ids: [],
      keywords:'',
      listQuery: {
        categoryId: '',
        type: '',
        stickStatus:'', //1置顶，0 不置顶
        keyWords: '',
        pageNo: 1,
        pageSize: 10
      },
      firstCategoryId:'',
      secondCategoryId:'',
      threeCategoryId:'',
      categories:[],  //筛选分类 
      secondCategory:[],
      threeCategory:[],
      types:[],  //筛选类型 单图、多图、、、、
      stickStatuses:[], //是否置顶
      listLoading: false,
      list: [],
      listTotal: 0,
    }
  },
  created() {
    this.getList()
    this.getCategories()
  },
  activated() {
    this.getList()
    this.getCategories()
  },
  methods: {
    // 搜索
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.listQuery.categoryId = this.threeCategoryId||this.secondCategoryId||this.firstCategoryId
      this.listQuery.keyWords = this.keywords.replace(/\s*/g, '')
      this.request({
        url: '/zhongcao-web-manage/social-material/list',
        method: 'get',
        params: this.listQuery
      }).then((res) => {
        this.list = res.data
        this.listTotal = res.totalCount
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    getCategories(){
      this.request({
        url: '/zhongcao-web-manage/social-material/search-condition',
        method: 'get',
        params: {
          type:1
        }
      }).then((res) => {
        this.categories = res.data.categories
        this.types = res.data.types
        this.stickStatuses = res.data.stickStatuses
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    // 表格复选框
    handleSelect (selection) {
        this.ids = []
        selection.map((item) => {
          this.ids.push(item.id) 
        })
    },
    //删除/批量删除
    delItem (delType, row) {
        if (delType==='batch') {
          if (this.ids.length === 0) {
            this.$message.info('请选择帖子')
            return
          }
        }
        this.$confirm('删除操作，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request({
            url: '/zhongcao-web-manage/social-material/delete',
            method: 'post',
            data: {
              ids : delType==='batch'?this.ids:[row.id]
            }
          }).then((res) => {
            if (res.data === true) {
              this.$message.success('删除成功')
              this.getList()
            }
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
        })
    },
    // 新增或编辑
    addOrEdit(row, type) {
      this.$router.push({
        path: `list/${type}`,
        query: {
          id: row.id
        }
      }) 
    },
    screenCategory(){
      this.request({
        url: '/zhongcao-web-manage/social-material/get-child-category-list',
        method: 'get',
        params: {
          categoryId:this.firstCategoryId,
          queryType:0
        }
      }).then((res) => {
        this.secondCategory = res.data
        this.secondCategoryId=''  //res.data.length>0 ? res.data[0].id :
        this.threeCategoryId = ''
        this.threeCategory=[]
      }).catch(err => {
        console.log(err)
      })
    },
    screenChildCategory(){
      this.request({
        url: '/zhongcao-web-manage/social-material/get-child-category-list',
        method: 'get',
        params: {
          categoryId:this.secondCategoryId,
          queryType:0
        }
      }).then((res) => {
        this.threeCategory = res.data
        this.threeCategoryId = ''
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .el-col-3 {
        margin-right: 10px;
    }
</style>
